{% load static %}
<section id="save-the-dates" class="bg-info">
    <div class="container">
        <div class="row">
            <div class="col-lg-12">
                <h2 class="section-heading text-center">Save the Dates</h2>
                <hr class="primary">
                <p>
                    We had a lot of fun with our save the dates.
                    We made six different versions and randomly sent them out to friends and family.
                    Click on any of the images below to see the full version.
                </p>
            </div>
        </div>
    </div>
    <div class="container-fluid">
        <div class="row no-gutter">
            {% for key, context in save_the_dates.items %}
            <div class="col-lg-4 col-sm-6">
                <a href="{% url 'save-the-date' key %}" target="_blank" class="portfolio-box page-scroll">
                    {% with "save-the-date/images/"|add:context.main_image as main_static_url %}
                    <img src="{% static main_static_url %}" class="img-responsive center-block img-circle" alt="{{ context.title }}">
                    {% endwith %}
                    <div class="portfolio-box-caption" style="background: rgba(49, 176, 213, .8);">
                        <div class="portfolio-box-caption-content">
                            <div class="project-name">
                                {{ context.title }}
                            </div>
                        </div>
                    </div>
                </a>
            </div>
            {% endfor %}
        </div>
    </div>
</section>

